<template>
  <div>
    <div class="wrap">
      <div class="header">
        <div class="left">
          <el-radio-group v-model="queryParams.tabType" size="small" @change="changeOption();">
            <el-radio-button :label="1">销售中({{ tabNumber.sale }})</el-radio-button>
            <el-radio-button :label="2">已售罄({{ tabNumber.sellOut }})</el-radio-button>
            <el-radio-button :label="3">全部({{tabNumber.sale + tabNumber.sellOut}})</el-radio-button>
          </el-radio-group>
        </div>
        <div class="right">
          <div style="display: inline-block;margin-right: 20px">
            <el-input size="small" style="width: 250px" v-model="queryParams.keyword" placeholder="搜索完整Listing ID或SKU"></el-input>
            <el-button size="small" type="primary" @click="changeOption">搜索</el-button>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="table">
          <el-table
            :data="tableData"
            row-key="id"
            border
            v-loading="loading"
          >
            <el-table-column
              prop="goods"
              label="封面"
              align="center"
              min-width="120"
              fixed="left"
            >
              <template slot-scope="{row}">
                <img :src="row.goods.image" width="85px" alt="">
              </template>
            </el-table-column>
            <el-table-column
              prop="title"
              label="标题"
              align="left"
              min-width="300"
              fixed="left"
            >
              <template slot-scope="{row}">
                <el-tooltip class="item" effect="dark" :content="row.goods.title" placement="top">
                  <div class="goods-title hidden-2">
                    {{row.goods.title}}
                  </div>
                </el-tooltip>

                <div class="goods-SKU-info hidden-1" v-if="row.goods.attributes.length > 0">
                  <span
                    v-for="attr in row.goods.attributes"
                    :key="attr.name"
                    class="attr"
                  >
                    {{attr.name}} : {{attr.value}}
                    <span class="attr-link"> | </span>

                  </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="goodsList"
              label="适用 Listing ID与SKU"
              align="center"
              min-width="200"
            >
              <template slot-scope="{row}">
                <p
                  v-for="item in row.goodsList"
                  :key="item.id"
                  style="margin: 0"
                >
                  {{item.goodsId}} {{item.sku ? `(${item.sku})` : ''}}
                </p>
              </template>
            </el-table-column>
            <el-table-column
              prop="sales"
              label="累计销量"
              align="center"
              min-width="100"
            >
            </el-table-column>
            <el-table-column
              prop="statusStr"
              label="状态"
              align="center"
              min-width="150"
            >
            </el-table-column>
            <el-table-column
              prop="aliGoods"
              label="供应商"
              align="center"
              min-width="150"
            >
              <template slot-scope="{row}">
                {{row.aliGoods ? row.aliGoods.supplierLoginId : '-'}}
                <template v-if="row.aliGoods">
                  <br>
                  <supplier-relation-tag :supplier-relation="row.aliGoods.supplierRelation"></supplier-relation-tag>
                </template>
              </template>
            </el-table-column>
            <el-table-column
              prop="aliGoods"
              label="采购货源"
              align="left"
              min-width="350"
            >
              <template slot-scope="{row}">
                <ali-goods :ali-goods="row.aliGoods"></ali-goods>
              </template>
            </el-table-column>
            <el-table-column
              prop="minOrderQuantity"
              label="起批量"
              align="center"
              min-width="150"
            >
              <template slot-scope="{row}">
                <div class="min-order-quantity">
                  <template v-if="row.aliGoods">
                    <p>
                      {{row.aliGoods.minOrderQuantity}}{{row.aliGoods.unit}}起批
                    </p>
                    <p v-if="row.aliGoods.mixWholeSale === 1">
                      {{row.aliGoods.mixNumber}}{{row.aliGoods.unit}}混批
                    </p>
                    <p v-if="row.aliGoods.isConsignMarketOffer">
                      一件代发
                    </p>
                  </template>
                  <template v-else>
                    -
                  </template>
                </div>


              </template>
            </el-table-column>
            <el-table-column
              prop="orderGoodsNum"
              label="累计采购"
              align="center"
              min-width="100"
            >
              <template slot-scope="{row}">
                {{row.orderGoodsNum || '-'}}
              </template>
            </el-table-column>
            <el-table-column
              prop=""
              label="操作"
              align="left"
              min-width="300"
            >
              <template slot-scope="{row}">
                <setting-procure :suit-id="row.id" @changeProcure="getData" class="mgr10"></setting-procure>
                <suit-goods :suit-id="row.id" class="mgr10" @changeGoodsSuit="getData"></suit-goods>
              </template>
            </el-table-column>

          </el-table>
          <div class="page-wrap">
            <el-pagination
              background
              layout="prev, pager, next"
              :current-page.sync="queryParams.page"
              :page-size="queryParams.pageSize"
              :total="count"
              @current-change="getData"
            >
            </el-pagination>
          </div>
        </div>

      </div>

    </div>

  </div>

</template>

<script>
import {getProcureGoodsList} from "@/api/procure";
import SettingProcure from "@/views/procure/components/settingProcure.vue";
import SuitGoods from "@/views/goods/components/suitGoods.vue";
import {jumpLink} from "@/utils/common";
import AliGoods from "@/views/procure/components/aliGoods.vue";
import SupplierRelationTag from "@/views/procure/components/supplierRelationTag.vue";

export default {
  name: "procureGoodsList",
  components: {SupplierRelationTag, AliGoods, SuitGoods, SettingProcure},
  computed:{
    tableData(){
      const data = [];
      this.data.forEach(item=>{
        data.push(item)
      })
      return data;
    }
  },
  data(){
    return {
      queryParams: {
        page: 1,
        pageSize: 10,
        keyword: '',
        tabType: 1,
      },
      loading: false,
      count: 0, //数据总数
      data: [], // 表格数据
      tabNumber:{
        sale: 0, // 销售中
        sellOut: 0, // 售罄
      },
    }
  },
  created() {
    this.getData();
  },
  methods:{
    jumpLink,
    // 获取数据
    getData(){
      this.loading = true;
      getProcureGoodsList(this.queryParams)
        .then(res=>{
          this.loading = false;
          this.data = res.data;
          this.count = res.info.count
          this.tabNumber.sellOut = res.info.sellOutNum
          this.tabNumber.sale = res.info.salesNum
        })
    },
    // 搜索改变
    changeOption(){
      this.queryParams.page = 1;
      this.getData()
    },
  },

}
</script>

<style scoped lang="less">
.wrap {
  padding: 10px 30px 30px;
  .header{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
  }
  .content{
    margin-top: 20px;
    .table{
      .goods-title{

      }

      .goods-SKU-info{
        font-weight: 400;
        font-style: normal;
        font-size: 13px;
        color: #7F7F7F;
        span:last-of-type .attr-link{
          display: none;
        }
      }
    }
  }

}
.sku-goods{
  font-weight: bold;
  .sku-image{
    float: left;
    img{
      width: 85px;
    }
  }
  .sku-info{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 85px;
    padding-left: 10px;
  }
}
.min-order-quantity{
  p{
    margin: 0;
    padding: 0;
  }
}
</style>
